layui.use(['table', 'layer'], function(){
    var table = layui.table;
    var layer = layui.layer;

    // 渲染表格并初始化分页
    table.render({
        elem: '#xueyuanTable',
        height: 'full-200',
        url: '/api/xueyuan/all', // 数据接口
        page: true, // 开启分页
        limit: 10, // 每页显示的条数
        limits: [10, 20, 30], // 每页条数的选择项
        cols: [[ // 表头
            {field: 'id', title: 'ID', width:80, sort: true},
            {field: 'name', title: '姓名', width:120},
            {field: 'gender', title: '性别', width:80},
            {field: 'age', title: '年龄', width:80, sort: true},
            {field: 'idCard', title: '身份证号', width:180},
            {field: 'phone', title: '电话', width:150},
            {field: 'email', title: '邮箱', width:180},
            {field: 'address', title: '地址', width:200},
            {field: 'course', title: '课程', width:120},
            {field: 'referrer', title: '推荐人', width:120},
            {field: 'remark', title: '备注', width:120},
            {field: 'createTime', title: '创建时间', width:180, templet: '<div>{{layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}}</div>'},
            {field: 'updateTime', title: '更新时间', width:180, templet: '<div>{{layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss")}}</div>'}
        ]],
        parseData: function(res){ // 将返回的 json 数据进行解析
            return {
                "code": res.code || 0, // 解析接口状态
                "msg": res.message || '', // 解析提示文本
                "count": res.length || 0, // 解析数据长度（总条数）
                "data": res // 解析数据列表
            };
        },
        request: {
            pageName: 'page', // 页码的参数名称，默认：page
            limitName: 'limit' // 每页数据量的参数名，默认：limit
        }
    });

    // 监听工具条（如果有的话）
    table.on('tool(xueyuanTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.msg('查看操作 - ID：'+ data.id);
        } else if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del(); // 删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.msg('编辑操作 - ID：'+ data.id);
        }
    });
});